<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <script src="../js/ajax.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            vertical-align: top;
        }

        .cl::after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .list {
            width: 1226px;
            margin: 0 auto;
            min-height: 608px;
        }

        .list li {
            width: -webkit-calc(100% / 5);
            float: left;
            padding: 10px;
            font-size: 14px;
            box-sizing: border-box;
        }

        .list li:hover {
            box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
        }

        .list li a {
            display: block;
            text-align: center;
        }

        .list li img {
            width: 80%;
            margin: 20px auto;
            transition: all 0.5s;
        }

        .list li:hover img {
            transform: rotate(360deg);
        }



        .info {
            font-size: 12px;
            line-height: 24px;
            height: 48px;
            /* 多行文本溢出隐藏 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .price {
            font-size: 12px;
            color: red;
        }

        .search_bar {
            margin: 20px auto;
        }

        .pageBox {
            width: max-content;
            margin: 0 auto;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <form class="search_bar w" onsubmit="return false">
        <div class="searchBox">
            <input type="text" class="searchCon">
            <button class="searchBtn">搜索</button>
        </div>
        <div class="orderBox">

            <div class="orderColBox">
                <label>
                    编号
                    <input type="radio" checked="" name="orderCol" class="orderCol" value="id">
                </label>
                <label>
                    名称
                    <input type="radio" name="orderCol" class="orderCol" value="goodsName">
                </label>
                <label>
                    价格
                    <input type="radio" name="orderCol" class="orderCol" value="goodsPrice">
                </label>
            </div>

            <div class="orderTypeBox">
                <label>
                    升序
                    <input type="radio" checked="" name="orderType" class="orderType" value="asc">
                </label>
                <label>
                    降序
                    <input type="radio" name="orderType" class="orderType" value="desc">
                </label>
            </div>
            <div class="showNumBox">
                <select class="select">
                    <option value="10" selected="">每页显示10条</option>
                    <option value="20">每页显示20条</option>
                    <option value="40">每页显示40条</option>
                    <option value="60">每页显示60条</option>
                </select>
            </div>
            <input type="reset" class="resetBtn" value="重置">
        </div>
    </form>
    <div class="list cl">
        <!-- <li>
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                    alt="">
            </a>
            <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
            <p class="price">￥<span>5988.00</span> </p>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                    alt="">
            </a>
            <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
            <p class="price">￥<span>5988.00</span> </p>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                    alt="">
            </a>
            <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
            <p class="price">￥<span>5988.00</span> </p>
        </li>
        <li>
            <a href="">
                <img src="https://img12.360buyimg.com/n7/jfs/t1/139098/11/697/82375/5ee6fcebE11053e13/f5df8e27a0b546c5.jpg"
                    alt="">
            </a>
            <p class="info">华为 HUAWEI P40 Pro 麒麟990 5G SoC芯片 5000万超感知徕卡四摄 50倍数字变焦 8GB+128GB冰霜银全网通5G</p>
            <p class="price">￥<span>5988.00</span> </p>
        </li> -->
    </div>
    <div class="pageBox">
        <button class="prev">上一页</button>
        <span class="pageTips">1/20,共444条</span>
        <button class="next">下一页</button>
    </div>
</body>
<script>
    var searchCon = document.getElementsByClassName("searchCon")[0];
    var searchBtn = document.getElementsByClassName("searchBtn")[0];
    var searchBar = document.getElementsByClassName("search_bar")[0];
    var select = document.getElementsByClassName("select")[0];
    var prev = document.getElementsByClassName("prev")[0];
    var next = document.getElementsByClassName("next")[0];
    var pageTips = document.getElementsByClassName("pageTips")[0];

    var ul = document.getElementsByClassName("list")[0];   //单元素
    console.log(ul);


    // 问题?  searchGoodsOrder  搜索和排序接口需要接收三个参数  少一个都不行,除了找自己的还要找另外两个(不好找)

    // 解决方法?
    // 提前声明全局变量 ( 记录关键词  排序的列名 排序的方式)  谁变就记录谁
    var key = "";  // 全局变量,记录关键词(默认 "")
    var orderCol = "id"; //全局变量,排序的列名(默认 "id")
    var orderType = "asc"; // 全局变量,排序的列名(默认 "asc")
    var pageIndex = 1; // 全局变量,保存页码(第几页)
    var showNum = 10; // 全局变量,每页显示多少条

    // 页面加载时默认请求所有商品  id 升序 (key="" 可以查询所有商品)
    loadGoods();



    searchBar.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        // 模糊搜索
        if (target.className == "searchBtn") {
            var searchCon = target.previousElementSibling;
            key = searchCon.value;
            console.log(key);
            loadGoods();
        } else if (target.className == "orderCol") {
            orderCol = target.value;
            console.log(orderCol);
            loadGoods();
        } else if (target.className == "orderType") {
            orderType = target.value;
            console.log(orderType);
            loadGoods();
        }
    }
    select.onchange = function () {
        showNum = this.value;
        // 1. 下拉框showNum切换时,把pageIndex重置为1
        // pageIndex = 1;
        loadGoods();
    }

    // 改动
    // 1. $.ajax()  新增  pageIndex, showNum
    // 2. showNum  => 下拉框改变时切换   showNum切换优化
    // 2. pageIndex => 上下页切换        pageIndex切换优化


    function loadGoods() {
        $.ajax({
            type: "get",
            url: "../php/searchGoodsOrderLimit.php",
            data: { key, orderCol, orderType, pageIndex, showNum },  // 不提形参,就找全局的
            dataType: "json",
            success(result) {
                console.log(result);
                var { status, detail, list, total, maxPage } = result;
                if (status) {
                    var html = "";
                    list.forEach(function (item) {
                        var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                        html += `<li>
                            <a href="./goodsDetail.html?gid=${goodsId}">
                                <img src="${goodsImg}" alt="">
                            </a>
                            <p class="info">${goodsName}</p>
                            <p class="price">￥<span>${goodsPrice}</span> </p>
                        </li>`
                    })
                    ul.innerHTML = html;

                    // 问题?  
                    // 下拉框showNum切换时(页码多的向页码少的切换),由于全局的pageIndex 没有改变,导致页码显示有误  
                    // 解决方法  没有变的 切换时变一下

                    // 方法1:
                    // 下拉框showNum切换时,把pageIndex重置为1

                    // 2. 做一个临界值限制  下拉框showNum切换时 , pageIndex超出maxPage 就改为maxPage
                    // 保存页码  超出就显示最后一页


                    // pageIndex = pageIndex > maxPage ? maxPage : pageIndex;
                    pageTips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;

                    // 下一页 
                    prev.onclick = function () {
                        if (pageIndex <= 1) return false;
                        // 自增
                        pageIndex--;
                        // 提示
                        pageTips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;
                        // 渲染
                        loadGoods();
                    }

                    // 下一页 
                    next.onclick = function () {
                        if (pageIndex >= maxPage) return false;
                        // 自增
                        pageIndex++;
                        // 提示
                        pageTips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;
                        // 渲染
                        loadGoods();
                    }

                } else {
                    ul.innerHTML = "暂无商品";
                }
            }
        })
    }

</script>

</html>